﻿<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>Fullscreen Pageflip Layout with BookBlock</title>
		<meta name="description" content="Fullscreen Pageflip Layout with BookBlock" />
		<meta name="keywords" content="fullscreen pageflip, booklet, layout, bookblock, jquery plugin, flipboard layout, sidebar menu" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico"> 
		
		<style type="text/css">
		
		/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */


/* Custom Style */
IsiStyle

.jspContainer {
	overflow: hidden;
	position: relative;
}

.jspPane {
	position: absolute;
	width: 100% !important;
	left: 0 !important;
}

.jspVerticalBar {
	position: absolute;
	top: 0px;
	right: 1%;
	width: 9px;
	height: 100%;
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
}

.jspContainer:hover .jspVerticalBar {
	opacity: 1;
}

.jspCap {
	display: block;
	background: #fff;
}

.jspVerticalBar .jspCap {
	height: 40px;
}

.jspTrack {
	background: rgba(242,242,242,0.5);
	box-shadow: inset 0 0 1px rgba(0,0,0,0.1), inset 1px 0 4px rgba(0,0,0,0.05);
	border-radius: 10px;
	position: relative;
}

.jspDrag {
	background: #fff;
	position: relative;
	box-shadow: inset -1px 0 8px rgba(0,0,0,0.05);
	top: 0;
	left: 0;
	border-radius: 5px;
	border: 1px solid #f0f0f0;
	cursor: pointer;
}

.jspCorner {
	background: #fff;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
	margin: 0 -3px 0 0;
}
/* Content Flip Style */
.bb-bookblock {
	width: 400px;
	height: 300px;
	position: relative;
	background: #fff;
	z-index: 100;
}

.bb-page {
	width: 50%;
	height: 100%;
	left: 50%;
	position: absolute;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-o-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
}

.bb-page > div,
.bb-outer,
.bb-content {
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
}

.bb-content {
	background: #fff;
}

.bb-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.bb-overlay, .bb-outer {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bb-page > div {
	width: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bb-back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.bb-outer {
	width: 100%;
	overflow: hidden;
	z-index: 999;
}

.bb-overlay, 
.bb-flipoverlay {
	background-color: rgba(0, 0, 0, 0.7);
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1000;
}

.bb-flipoverlay {
	background-color: rgba(0, 0, 0, 0.2);
}

.bb-bookblock > div.bb-page:first-child,
.bb-bookblock > div.bb-page:first-child .bb-back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.js .bb-item {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	background: #fff;
}
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

html { height: 100%; }

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	font-weight: 400;
	font-size: 100%;
	height: 100%;
}

.js body {
	overflow: hidden;
}

a {
	color: #555;
	text-decoration: none;
	outline: none;
}

a:hover {
	color: #000;
}

.container,
.bb-custom-wrapper,
.bb-bookblock {
	width: 100%;
	height: 100%;
}

.container {
	position: relative;
	left: 0px;
	-webkit-transition: left 0.3s ease-in-out;
	-o-transition: left 0.3s ease-in-out;
	transition: left 0.3s ease-in-out;
}

.slideRight {
	left: 240px;
}

.no-js .container {
	padding-left: 240px;
}

.menu-panel {
	background: #f1103a;
	width: 240px;
	height: 100%;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.js .menu-panel {
	position: absolute;
	left: -240px;
}

.menu-panel h3 {
	font-size: 1.8em;
	padding: 20px;
	font-weight: 300;
	color: #fff;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
} 

.menu-toc {
	list-style: none;
}

.menu-toc li a {
	display: block;
	color: #fff;
	font-size: 1.1em;
	line-height: 3.5;
	padding: 0 20px;
	cursor: pointer;
	background: #f1103a;
	border-bottom: 1px solid #dd1338;
}

.menu-toc li a:hover,
.menu-toc li.menu-toc-current a{
	background: #dd1338;
}

.menu-panel div {
	margin-top: 20px;
}

.menu-panel div a {
	text-transform: uppercase;
	font-size: 0.7em;
	line-height: 1;
	padding: 5px 20px;
	display: block;
	border: none;
	color: #bc0b0b;
	letter-spacing: 1px;
	font-weight: 800;
	text-shadow: 0 1px rgba(255,255,255,0.2);
} 

.menu-panel div a:hover {
	background: inherit;
	color: #fff;
	text-shadow: none;
}

.bb-custom-wrapper nav {
	top: 20px;
	left: 60px;
	position: absolute;
	z-index: 1000;
}

.bb-custom-wrapper nav span,
.menu-button {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 0;
	left: 0;
	background: #f1103a;
	border-radius: 50%;
	color: #fff;
	line-height: 30px;
	text-align: center;
	speak: none;
	font-weight: bold;
	cursor: pointer;
}

.bb-custom-wrapper nav span:hover,
.menu-button:hover {
	background: #000;
}

.bb-custom-wrapper nav span:last-child {
	left: 40px;
}

.menu-button {
	z-index: 1000;
	left: 20px;
	top: 20px;
	text-indent: -9000px;
}

.menu-button:after {
	position: absolute;
	content: '';
	width: 50%;
	height: 2px;
	background: #fff;
	top: 50%;
	margin-top: -1px;
	left: 25%;
	box-shadow: 0 -4px #fff, 0 4px #fff;
}

.no-js .bb-custom-wrapper nav span,
.no-js .menu-button {
	display: none;
}

.js .content {
	position: absolute;
	top: 60px;
	left: 0;
	width: 100%;
	bottom: 50px;
	overflow: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
}

.scroller {
	padding: 10px 5% 10px 5%;
}

.js .content:before,
.js .content:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	z-index: 100;
	pointer-events: none;
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.js .content:after {
	top: auto;
	bottom: 0;
	background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}



@media screen and (max-width: 800px){
	.no-js .menu-panel {
		display: none;
	}

	.no-js .container {
		padding: 0;
	}
}

@media screen and (max-width: 400px){
	.menu-panel,
	.content {
		font-size: 75%;
	}
}
		</style>
		
		<script>
            IsiScript
		    /* Modernizr 2.6.1 (Custom Build) | MIT & BSD
     * Build: http://modernizr.com/download/#-cssanimations-csstransforms-csstransforms3d-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load
     */
		    ; window.Modernizr = function (a, b, c) { function z(a) { j.cssText = a } function A(a, b) { return z(m.join(a + ";") + (b || "")) } function B(a, b) { return typeof a === b } function C(a, b) { return !!~("" + a).indexOf(b) } function D(a, b) { for (var d in a) { var e = a[d]; if (!C(e, "-") && j[e] !== c) return b == "pfx" ? e : !0 } return !1 } function E(a, b, d) { for (var e in a) { var f = b[a[e]]; if (f !== c) return d === !1 ? a[e] : B(f, "function") ? f.bind(d || b) : f } return !1 } function F(a, b, c) { var d = a.charAt(0).toUpperCase() + a.slice(1), e = (a + " " + o.join(d + " ") + d).split(" "); return B(b, "string") || B(b, "undefined") ? D(e, b) : (e = (a + " " + p.join(d + " ") + d).split(" "), E(e, b, c)) } var d = "2.6.1", e = {}, f = !0, g = b.documentElement, h = "modernizr", i = b.createElement(h), j = i.style, k, l = {}.toString, m = " -webkit- -moz- -o- -ms- ".split(" "), n = "Webkit Moz O ms", o = n.split(" "), p = n.toLowerCase().split(" "), q = {}, r = {}, s = {}, t = [], u = t.slice, v, w = function (a, c, d, e) { var f, i, j, k = b.createElement("div"), l = b.body, m = l ? l : b.createElement("body"); if (parseInt(d, 10)) while (d--) j = b.createElement("div"), j.id = e ? e[d] : h + (d + 1), k.appendChild(j); return f = ["&#173;", '<style id="s', h, '">', a, "</style>"].join(""), k.id = h, (l ? k : m).innerHTML += f, m.appendChild(k), l || (m.style.background = "", g.appendChild(m)), i = c(k, a), l ? k.parentNode.removeChild(k) : m.parentNode.removeChild(m), !!i }, x = {}.hasOwnProperty, y; !B(x, "undefined") && !B(x.call, "undefined") ? y = function (a, b) { return x.call(a, b) } : y = function (a, b) { return b in a && B(a.constructor.prototype[b], "undefined") }, Function.prototype.bind || (Function.prototype.bind = function (b) { var c = this; if (typeof c != "function") throw new TypeError; var d = u.call(arguments, 1), e = function () { if (this instanceof e) { var a = function () { }; a.prototype = c.prototype; var f = new a, g = c.apply(f, d.concat(u.call(arguments))); return Object(g) === g ? g : f } return c.apply(b, d.concat(u.call(arguments))) }; return e }), q.touch = function () { var c; return "ontouchstart" in a || a.DocumentTouch && b instanceof DocumentTouch ? c = !0 : w(["@media (", m.join("touch-enabled),("), h, ")", "{#modernizr{top:9px;position:absolute}}"].join(""), function (a) { c = a.offsetTop === 9 }), c }, q.cssanimations = function () { return F("animationName") }, q.csstransforms = function () { return !!F("transform") }, q.csstransforms3d = function () { var a = !!F("perspective"); return a && "webkitPerspective" in g.style && w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}", function (b, c) { a = b.offsetLeft === 9 && b.offsetHeight === 3 }), a }, q.csstransitions = function () { return F("transition") }; for (var G in q) y(q, G) && (v = G.toLowerCase(), e[v] = q[G](), t.push((e[v] ? "" : "no-") + v)); return e.addTest = function (a, b) { if (typeof a == "object") for (var d in a) y(a, d) && e.addTest(d, a[d]); else { a = a.toLowerCase(); if (e[a] !== c) return e; b = typeof b == "function" ? b() : b, f && (g.className += " " + (b ? "" : "no-") + a), e[a] = b } return e }, z(""), i = k = null, function (a, b) { function k(a, b) { var c = a.createElement("p"), d = a.getElementsByTagName("head")[0] || a.documentElement; return c.innerHTML = "x<style>" + b + "</style>", d.insertBefore(c.lastChild, d.firstChild) } function l() { var a = r.elements; return typeof a == "string" ? a.split(" ") : a } function m(a) { var b = i[a[g]]; return b || (b = {}, h++, a[g] = h, i[h] = b), b } function n(a, c, f) { c || (c = b); if (j) return c.createElement(a); f || (f = m(c)); var g; return f.cache[a] ? g = f.cache[a].cloneNode() : e.test(a) ? g = (f.cache[a] = f.createElem(a)).cloneNode() : g = f.createElem(a), g.canHaveChildren && !d.test(a) ? f.frag.appendChild(g) : g } function o(a, c) { a || (a = b); if (j) return a.createDocumentFragment(); c = c || m(a); var d = c.frag.cloneNode(), e = 0, f = l(), g = f.length; for (; e < g; e++) d.createElement(f[e]); return d } function p(a, b) { b.cache || (b.cache = {}, b.createElem = a.createElement, b.createFrag = a.createDocumentFragment, b.frag = b.createFrag()), a.createElement = function (c) { return r.shivMethods ? n(c, a, b) : b.createElem(c) }, a.createDocumentFragment = Function("h,f", "return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&(" + l().join().replace(/\w+/g, function (a) { return b.createElem(a), b.frag.createElement(a), 'c("' + a + '")' }) + ");return n}")(r, b.frag) } function q(a) { a || (a = b); var c = m(a); return r.shivCSS && !f && !c.hasCSS && (c.hasCSS = !!k(a, "article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")), j || p(a, c), a } var c = a.html5 || {}, d = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i, e = /^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i, f, g = "_html5shiv", h = 0, i = {}, j; (function () { try { var a = b.createElement("a"); a.innerHTML = "<xyz></xyz>", f = "hidden" in a, j = a.childNodes.length == 1 || function () { b.createElement("a"); var a = b.createDocumentFragment(); return typeof a.cloneNode == "undefined" || typeof a.createDocumentFragment == "undefined" || typeof a.createElement == "undefined" }() } catch (c) { f = !0, j = !0 } })(); var r = { elements: c.elements || "abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video", shivCSS: c.shivCSS !== !1, supportsUnknownElements: j, shivMethods: c.shivMethods !== !1, type: "default", shivDocument: q, createElement: n, createDocumentFragment: o }; a.html5 = r, q(b) }(this, b), e._version = d, e._prefixes = m, e._domPrefixes = p, e._cssomPrefixes = o, e.testProp = function (a) { return D([a]) }, e.testAllProps = F, e.testStyles = w, e.prefixed = function (a, b, c) { return b ? F(a, b, c) : F(a, "pfx") }, g.className = g.className.replace(/(^|\s)no-js(\s|$)/, "$1$2") + (f ? " js " + t.join(" ") : ""), e }(this, this.document), function (a, b, c) { function d(a) { return "[object Function]" == o.call(a) } function e(a) { return "string" == typeof a } function f() { } function g(a) { return !a || "loaded" == a || "complete" == a || "uninitialized" == a } function h() { var a = p.shift(); q = 1, a ? a.t ? m(function () { ("c" == a.t ? B.injectCss : B.injectJs)(a.s, 0, a.a, a.x, a.e, 1) }, 0) : (a(), h()) : q = 0 } function i(a, c, d, e, f, i, j) { function k(b) { if (!o && g(l.readyState) && (u.r = o = 1, !q && h(), l.onload = l.onreadystatechange = null, b)) { "img" != a && m(function () { t.removeChild(l) }, 50); for (var d in y[c]) y[c].hasOwnProperty(d) && y[c][d].onload() } } var j = j || B.errorTimeout, l = b.createElement(a), o = 0, r = 0, u = { t: d, s: c, e: f, a: i, x: j }; 1 === y[c] && (r = 1, y[c] = []), "object" == a ? l.data = c : (l.src = c, l.type = a), l.width = l.height = "0", l.onerror = l.onload = l.onreadystatechange = function () { k.call(this, r) }, p.splice(e, 0, u), "img" != a && (r || 2 === y[c] ? (t.insertBefore(l, s ? null : n), m(k, j)) : y[c].push(l)) } function j(a, b, c, d, f) { return q = 0, b = b || "j", e(a) ? i("c" == b ? v : u, a, b, this.i++, c, d, f) : (p.splice(this.i++, 0, a), 1 == p.length && h()), this } function k() { var a = B; return a.loader = { load: j, i: 0 }, a } var l = b.documentElement, m = a.setTimeout, n = b.getElementsByTagName("script")[0], o = {}.toString, p = [], q = 0, r = "MozAppearance" in l.style, s = r && !!b.createRange().compareNode, t = s ? l : n.parentNode, l = a.opera && "[object Opera]" == o.call(a.opera), l = !!b.attachEvent && !l, u = r ? "object" : l ? "script" : "img", v = l ? "script" : u, w = Array.isArray || function (a) { return "[object Array]" == o.call(a) }, x = [], y = {}, z = { timeout: function (a, b) { return b.length && (a.timeout = b[0]), a } }, A, B; B = function (a) { function b(a) { var a = a.split("!"), b = x.length, c = a.pop(), d = a.length, c = { url: c, origUrl: c, prefixes: a }, e, f, g; for (f = 0; f < d; f++) g = a[f].split("="), (e = z[g.shift()]) && (c = e(c, g)); for (f = 0; f < b; f++) c = x[f](c); return c } function g(a, e, f, g, h) { var i = b(a), j = i.autoCallback; i.url.split(".").pop().split("?").shift(), i.bypass || (e && (e = d(e) ? e : e[a] || e[g] || e[a.split("/").pop().split("?")[0]]), i.instead ? i.instead(a, e, f, g, h) : (y[i.url] ? i.noexec = !0 : y[i.url] = 1, f.load(i.url, i.forceCSS || !i.forceJS && "css" == i.url.split(".").pop().split("?").shift() ? "c" : c, i.noexec, i.attrs, i.timeout), (d(e) || d(j)) && f.load(function () { k(), e && e(i.origUrl, h, g), j && j(i.origUrl, h, g), y[i.url] = 2 }))) } function h(a, b) { function c(a, c) { if (a) { if (e(a)) c || (j = function () { var a = [].slice.call(arguments); k.apply(this, a), l() }), g(a, j, b, 0, h); else if (Object(a) === a) for (n in m = function () { var b = 0, c; for (c in a) a.hasOwnProperty(c) && b++; return b }(), a) a.hasOwnProperty(n) && (!c && !--m && (d(j) ? j = function () { var a = [].slice.call(arguments); k.apply(this, a), l() } : j[n] = function (a) { return function () { var b = [].slice.call(arguments); a && a.apply(this, b), l() } }(k[n])), g(a[n], j, b, n, h)) } else !c && l() } var h = !!a.test, i = a.load || a.both, j = a.callback || f, k = j, l = a.complete || f, m, n; c(h ? a.yep : a.nope, !!i), i && c(i) } var i, j, l = this.yepnope.loader; if (e(a)) g(a, 0, l, 0); else if (w(a)) for (i = 0; i < a.length; i++) j = a[i], e(j) ? g(j, 0, l, 0) : w(j) ? B(j) : Object(j) === j && h(j, l); else Object(a) === a && h(a, l) }, B.addPrefix = function (a, b) { z[a] = b }, B.addFilter = function (a) { x.push(a) }, B.errorTimeout = 1e4, null == b.readyState && b.addEventListener && (b.readyState = "loading", b.addEventListener("DOMContentLoaded", A = function () { b.removeEventListener("DOMContentLoaded", A, 0), b.readyState = "complete" }, 0)), a.yepnope = k(), a.yepnope.executeStack = h, a.yepnope.injectJs = function (a, c, d, e, i, j) { var k = b.createElement("script"), l, o, e = e || B.errorTimeout; k.src = a; for (o in d) k.setAttribute(o, d[o]); c = j ? h : c || f, k.onreadystatechange = k.onload = function () { !l && g(k.readyState) && (l = 1, c(), k.onload = k.onreadystatechange = null) }, m(function () { l || (l = 1, c(1)) }, e), i ? k.onload() : n.parentNode.insertBefore(k, n) }, a.yepnope.injectCss = function (a, c, d, e, g, i) { var e = b.createElement("link"), j, c = i ? h : c || f; e.href = a, e.rel = "stylesheet", e.type = "text/css"; for (j in d) e.setAttribute(j, d[j]); g || (n.parentNode.insertBefore(e, n), m(c, 0)) } }(this, document), Modernizr.load = function () { yepnope.apply(window, [].slice.call(arguments, 0)) };
		</script>
	</head>
	<body>
		<div id="container" class="container">	

			<div class="menu-panel">
			<div class="scroller">
				<h3>Table of Contents</h3>
				<ul id="menu-toc" class="menu-toc">
					<script >
					    i = 1;
					    document.write('<li class="menu-toc-current"><a href="#item1">Judul' + i + '</a></li>')
					    for (i = 2; i < 5; i++) {
					        document.write('<li><a href="#item' + i + '">Judul' + i + '</a></li>')
					    }
					</script>
				</ul> 	
			</div>			
			</div>
            
			    <div class="bb-custom-wrapper">
			    <div id="bb-bookblock" class="bb-bookblock">
			
			    
                IsiHtml
								
					</div>
			    <nav><span id="bb-nav-prev">&larr;</span><span id="bb-nav-next">&rarr;</span></nav>
			    <span id="tblcontents" class="menu-button">Table of Contents</span>
			    </div>
				
		</div><!-- /container -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script>
		    /*
     * jScrollPane - v2.0.0beta11 - 2011-07-04
     * http://jscrollpane.kelvinluck.com/
     *
     * Copyright (c) 2010 Kelvin Luck
     * Dual licensed under the MIT and GPL licenses.
     */
		    (function (b, a, c) {
		        b.fn.jScrollPane = function (e) {
		            function d(D, O) {
		                var az, Q = this, Y, ak, v, am, T, Z, y, q, aA, aF, av, i, I, h, j, aa, U, aq, X, t, A, ar, af, an, G, l, au, ay, x, aw, aI, f, L, aj = true, P = true, aH = false, k = false, ap = D.clone(false, false).empty(), ac = b.fn.mwheelIntent ? "mwheelIntent.jsp" : "mousewheel.jsp"; aI = D.css("paddingTop") + " " + D.css("paddingRight") + " " + D.css("paddingBottom") + " " + D.css("paddingLeft"); f = (parseInt(D.css("paddingLeft"), 10) || 0) + (parseInt(D.css("paddingRight"), 10) || 0); function at(aR) { var aM, aO, aN, aK, aJ, aQ, aP = false, aL = false; az = aR; if (Y === c) { aJ = D.scrollTop(); aQ = D.scrollLeft(); D.css({ overflow: "hidden", padding: 0 }); ak = D.innerWidth() + f; v = D.innerHeight(); D.width(ak); Y = b('<div class="jspPane" />').css("padding", aI).append(D.children()); am = b('<div class="jspContainer" />').css({ width: ak + "px", height: v + "px" }).append(Y).appendTo(D) } else { D.css("width", ""); aP = az.stickToBottom && K(); aL = az.stickToRight && B(); aK = D.innerWidth() + f != ak || D.outerHeight() != v; if (aK) { ak = D.innerWidth() + f; v = D.innerHeight(); am.css({ width: ak + "px", height: v + "px" }) } if (!aK && L == T && Y.outerHeight() == Z) { D.width(ak); return } L = T; Y.css("width", ""); D.width(ak); am.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end() } Y.css("overflow", "auto"); if (aR.contentWidth) { T = aR.contentWidth } else { T = Y[0].scrollWidth } Z = Y[0].scrollHeight; Y.css("overflow", ""); y = T / ak; q = Z / v; aA = q > 1; aF = y > 1; if (!(aF || aA)) { D.removeClass("jspScrollable"); Y.css({ top: 0, width: am.width() - f }); n(); E(); R(); w(); ai() } else { D.addClass("jspScrollable"); aM = az.maintainPosition && (I || aa); if (aM) { aO = aD(); aN = aB() } aG(); z(); F(); if (aM) { N(aL ? (T - ak) : aO, false); M(aP ? (Z - v) : aN, false) } J(); ag(); ao(); if (az.enableKeyboardNavigation) { S() } if (az.clickOnTrack) { p() } C(); if (az.hijackInternalLinks) { m() } } if (az.autoReinitialise && !aw) { aw = setInterval(function () { at(az) }, az.autoReinitialiseDelay) } else { if (!az.autoReinitialise && aw) { clearInterval(aw) } } aJ && D.scrollTop(0) && M(aJ, false); aQ && D.scrollLeft(0) && N(aQ, false); D.trigger("jsp-initialised", [aF || aA]) } function aG() { if (aA) { am.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'), b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'), b('<div class="jspDragBottom" />'))), b('<div class="jspCap jspCapBottom" />'))); U = am.find(">.jspVerticalBar"); aq = U.find(">.jspTrack"); av = aq.find(">.jspDrag"); if (az.showArrows) { ar = b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp", aE(0, -1)).bind("click.jsp", aC); af = b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp", aE(0, 1)).bind("click.jsp", aC); if (az.arrowScrollOnHover) { ar.bind("mouseover.jsp", aE(0, -1, ar)); af.bind("mouseover.jsp", aE(0, 1, af)) } al(aq, az.verticalArrowPositions, ar, af) } t = v; am.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function () { t -= b(this).outerHeight() }); av.hover(function () { av.addClass("jspHover") }, function () { av.removeClass("jspHover") }).bind("mousedown.jsp", function (aJ) { b("html").bind("dragstart.jsp selectstart.jsp", aC); av.addClass("jspActive"); var s = aJ.pageY - av.position().top; b("html").bind("mousemove.jsp", function (aK) { V(aK.pageY - s, false) }).bind("mouseup.jsp mouseleave.jsp", ax); return false }); o() } } function o() { aq.height(t + "px"); I = 0; X = az.verticalGutter + aq.outerWidth(); Y.width(ak - X - f); try { if (U.position().left === 0) { Y.css("margin-left", X + "px") } } catch (s) { } } function z() {
		                    if (aF) {
		                        am.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'), b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'), b('<div class="jspDragRight" />'))), b('<div class="jspCap jspCapRight" />'))); an = am.find(">.jspHorizontalBar"); G = an.find(">.jspTrack"); h = G.find(">.jspDrag"); if (az.showArrows) {
		                            ay = b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp", aE(-1, 0)).bind("click.jsp", aC); x = b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp", aE(1, 0)).bind("click.jsp", aC);
		                            if (az.arrowScrollOnHover) { ay.bind("mouseover.jsp", aE(-1, 0, ay)); x.bind("mouseover.jsp", aE(1, 0, x)) } al(G, az.horizontalArrowPositions, ay, x)
		                        } h.hover(function () { h.addClass("jspHover") }, function () { h.removeClass("jspHover") }).bind("mousedown.jsp", function (aJ) { b("html").bind("dragstart.jsp selectstart.jsp", aC); h.addClass("jspActive"); var s = aJ.pageX - h.position().left; b("html").bind("mousemove.jsp", function (aK) { W(aK.pageX - s, false) }).bind("mouseup.jsp mouseleave.jsp", ax); return false }); l = am.innerWidth(); ah()
		                    }
		                } function ah() { am.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function () { l -= b(this).outerWidth() }); G.width(l + "px"); aa = 0 } function F() { if (aF && aA) { var aJ = G.outerHeight(), s = aq.outerWidth(); t -= aJ; b(an).find(">.jspCap:visible,>.jspArrow").each(function () { l += b(this).outerWidth() }); l -= s; v -= s; ak -= aJ; G.parent().append(b('<div class="jspCorner" />').css("width", aJ + "px")); o(); ah() } if (aF) { Y.width((am.outerWidth() - f) + "px") } Z = Y.outerHeight(); q = Z / v; if (aF) { au = Math.ceil(1 / y * l); if (au > az.horizontalDragMaxWidth) { au = az.horizontalDragMaxWidth } else { if (au < az.horizontalDragMinWidth) { au = az.horizontalDragMinWidth } } h.width(au + "px"); j = l - au; ae(aa) } if (aA) { A = Math.ceil(1 / q * t); if (A > az.verticalDragMaxHeight) { A = az.verticalDragMaxHeight } else { if (A < az.verticalDragMinHeight) { A = az.verticalDragMinHeight } } av.height(A + "px"); i = t - A; ad(I) } } function al(aK, aM, aJ, s) { var aO = "before", aL = "after", aN; if (aM == "os") { aM = /Mac/.test(navigator.platform) ? "after" : "split" } if (aM == aO) { aL = aM } else { if (aM == aL) { aO = aM; aN = aJ; aJ = s; s = aN } } aK[aO](aJ)[aL](s) } function aE(aJ, s, aK) { return function () { H(aJ, s, this, aK); this.blur(); return false } } function H(aM, aL, aP, aO) { aP = b(aP).addClass("jspActive"); var aN, aK, aJ = true, s = function () { if (aM !== 0) { Q.scrollByX(aM * az.arrowButtonSpeed) } if (aL !== 0) { Q.scrollByY(aL * az.arrowButtonSpeed) } aK = setTimeout(s, aJ ? az.initialDelay : az.arrowRepeatFreq); aJ = false }; s(); aN = aO ? "mouseout.jsp" : "mouseup.jsp"; aO = aO || b("html"); aO.bind(aN, function () { aP.removeClass("jspActive"); aK && clearTimeout(aK); aK = null; aO.unbind(aN) }) } function p() { w(); if (aA) { aq.bind("mousedown.jsp", function (aO) { if (aO.originalTarget === c || aO.originalTarget == aO.currentTarget) { var aM = b(this), aP = aM.offset(), aN = aO.pageY - aP.top - I, aK, aJ = true, s = function () { var aS = aM.offset(), aT = aO.pageY - aS.top - A / 2, aQ = v * az.scrollPagePercent, aR = i * aQ / (Z - v); if (aN < 0) { if (I - aR > aT) { Q.scrollByY(-aQ) } else { V(aT) } } else { if (aN > 0) { if (I + aR < aT) { Q.scrollByY(aQ) } else { V(aT) } } else { aL(); return } } aK = setTimeout(s, aJ ? az.initialDelay : az.trackClickRepeatFreq); aJ = false }, aL = function () { aK && clearTimeout(aK); aK = null; b(document).unbind("mouseup.jsp", aL) }; s(); b(document).bind("mouseup.jsp", aL); return false } }) } if (aF) { G.bind("mousedown.jsp", function (aO) { if (aO.originalTarget === c || aO.originalTarget == aO.currentTarget) { var aM = b(this), aP = aM.offset(), aN = aO.pageX - aP.left - aa, aK, aJ = true, s = function () { var aS = aM.offset(), aT = aO.pageX - aS.left - au / 2, aQ = ak * az.scrollPagePercent, aR = j * aQ / (T - ak); if (aN < 0) { if (aa - aR > aT) { Q.scrollByX(-aQ) } else { W(aT) } } else { if (aN > 0) { if (aa + aR < aT) { Q.scrollByX(aQ) } else { W(aT) } } else { aL(); return } } aK = setTimeout(s, aJ ? az.initialDelay : az.trackClickRepeatFreq); aJ = false }, aL = function () { aK && clearTimeout(aK); aK = null; b(document).unbind("mouseup.jsp", aL) }; s(); b(document).bind("mouseup.jsp", aL); return false } }) } } function w() { if (G) { G.unbind("mousedown.jsp") } if (aq) { aq.unbind("mousedown.jsp") } } function ax() { b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp"); if (av) { av.removeClass("jspActive") } if (h) { h.removeClass("jspActive") } } function V(s, aJ) { if (!aA) { return } if (s < 0) { s = 0 } else { if (s > i) { s = i } } if (aJ === c) { aJ = az.animateScroll } if (aJ) { Q.animate(av, "top", s, ad) } else { av.css("top", s); ad(s) } } function ad(aJ) { if (aJ === c) { aJ = av.position().top } am.scrollTop(0); I = aJ; var aM = I === 0, aK = I == i, aL = aJ / i, s = -aL * (Z - v); if (aj != aM || aH != aK) { aj = aM; aH = aK; D.trigger("jsp-arrow-change", [aj, aH, P, k]) } u(aM, aK); Y.css("top", s); D.trigger("jsp-scroll-y", [-s, aM, aK]).trigger("scroll") } function W(aJ, s) {
		                    if (!aF) { return } if (aJ < 0) { aJ = 0 } else { if (aJ > j) { aJ = j } } if (s === c) { s = az.animateScroll } if (s) {
		                        Q.animate(h, "left", aJ, ae)
		                    } else { h.css("left", aJ); ae(aJ) }
		                } function ae(aJ) { if (aJ === c) { aJ = h.position().left } am.scrollTop(0); aa = aJ; var aM = aa === 0, aL = aa == j, aK = aJ / j, s = -aK * (T - ak); if (P != aM || k != aL) { P = aM; k = aL; D.trigger("jsp-arrow-change", [aj, aH, P, k]) } r(aM, aL); Y.css("left", s); D.trigger("jsp-scroll-x", [-s, aM, aL]).trigger("scroll") } function u(aJ, s) { if (az.showArrows) { ar[aJ ? "addClass" : "removeClass"]("jspDisabled"); af[s ? "addClass" : "removeClass"]("jspDisabled") } } function r(aJ, s) { if (az.showArrows) { ay[aJ ? "addClass" : "removeClass"]("jspDisabled"); x[s ? "addClass" : "removeClass"]("jspDisabled") } } function M(s, aJ) { var aK = s / (Z - v); V(aK * i, aJ) } function N(aJ, s) { var aK = aJ / (T - ak); W(aK * j, s) } function ab(aW, aR, aK) { var aO, aL, aM, s = 0, aV = 0, aJ, aQ, aP, aT, aS, aU; try { aO = b(aW) } catch (aN) { return } aL = aO.outerHeight(); aM = aO.outerWidth(); am.scrollTop(0); am.scrollLeft(0); while (!aO.is(".jspPane")) { s += aO.position().top; aV += aO.position().left; aO = aO.offsetParent(); if (/^body|html$/i.test(aO[0].nodeName)) { return } } aJ = aB(); aP = aJ + v; if (s < aJ || aR) { aS = s - az.verticalGutter } else { if (s + aL > aP) { aS = s - v + aL + az.verticalGutter } } if (aS) { M(aS, aK) } aQ = aD(); aT = aQ + ak; if (aV < aQ || aR) { aU = aV - az.horizontalGutter } else { if (aV + aM > aT) { aU = aV - ak + aM + az.horizontalGutter } } if (aU) { N(aU, aK) } } function aD() { return -Y.position().left } function aB() { return -Y.position().top } function K() { var s = Z - v; return (s > 20) && (s - aB() < 10) } function B() { var s = T - ak; return (s > 20) && (s - aD() < 10) } function ag() { am.unbind(ac).bind(ac, function (aM, aN, aL, aJ) { var aK = aa, s = I; Q.scrollBy(aL * az.mouseWheelSpeed, -aJ * az.mouseWheelSpeed, false); return aK == aa && s == I }) } function n() { am.unbind(ac) } function aC() { return false } function J() { Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp", function (s) { ab(s.target, false) }) } function E() { Y.find(":input,a").unbind("focus.jsp") } function S() { var s, aJ, aL = []; aF && aL.push(an[0]); aA && aL.push(U[0]); Y.focus(function () { D.focus() }); D.attr("tabindex", 0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp", function (aO) { if (aO.target !== this && !(aL.length && b(aO.target).closest(aL).length)) { return } var aN = aa, aM = I; switch (aO.keyCode) { case 40: case 38: case 34: case 32: case 33: case 39: case 37: s = aO.keyCode; aK(); break; case 35: M(Z - v); s = null; break; case 36: M(0); s = null; break } aJ = aO.keyCode == s && aN != aa || aM != I; return !aJ }).bind("keypress.jsp", function (aM) { if (aM.keyCode == s) { aK() } return !aJ }); if (az.hideFocus) { D.css("outline", "none"); if ("hideFocus" in am[0]) { D.attr("hideFocus", true) } } else { D.css("outline", ""); if ("hideFocus" in am[0]) { D.attr("hideFocus", false) } } function aK() { var aN = aa, aM = I; switch (s) { case 40: Q.scrollByY(az.keyboardSpeed, false); break; case 38: Q.scrollByY(-az.keyboardSpeed, false); break; case 34: case 32: Q.scrollByY(v * az.scrollPagePercent, false); break; case 33: Q.scrollByY(-v * az.scrollPagePercent, false); break; case 39: Q.scrollByX(az.keyboardSpeed, false); break; case 37: Q.scrollByX(-az.keyboardSpeed, false); break } aJ = aN != aa || aM != I; return aJ } } function R() { D.attr("tabindex", "-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp") } function C() { if (location.hash && location.hash.length > 1) { var aL, aJ, aK = escape(location.hash); try { aL = b(aK) } catch (s) { return } if (aL.length && Y.find(aK)) { if (am.scrollTop() === 0) { aJ = setInterval(function () { if (am.scrollTop() > 0) { ab(aK, true); b(document).scrollTop(am.position().top); clearInterval(aJ) } }, 50) } else { ab(aK, true); b(document).scrollTop(am.position().top) } } } } function ai() { b("a.jspHijack").unbind("click.jsp-hijack").removeClass("jspHijack") } function m() { ai(); b("a[href^=#]").addClass("jspHijack").bind("click.jsp-hijack", function () { var s = this.href.split("#"), aJ; if (s.length > 1) { aJ = s[1]; if (aJ.length > 0 && Y.find("#" + aJ).length > 0) { ab("#" + aJ, true); return false } } }) } function ao() {
		                    var aK, aJ, aM, aL, aN, s = false; am.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp", function (aO) { var aP = aO.originalEvent.touches[0]; aK = aD(); aJ = aB(); aM = aP.pageX; aL = aP.pageY; aN = false; s = true }).bind("touchmove.jsp", function (aR) {
		                        if (!s) { return } var aQ = aR.originalEvent.touches[0], aP = aa, aO = I; Q.scrollTo(aK + aM - aQ.pageX, aJ + aL - aQ.pageY); aN = aN || Math.abs(aM - aQ.pageX) > 5 || Math.abs(aL - aQ.pageY) > 5;
		                        return aP == aa && aO == I
		                    }).bind("touchend.jsp", function (aO) { s = false }).bind("click.jsp-touchclick", function (aO) { if (aN) { aN = false; return false } })
		                } function g() { var s = aB(), aJ = aD(); D.removeClass("jspScrollable").unbind(".jsp"); D.replaceWith(ap.append(Y.children())); ap.scrollTop(s); ap.scrollLeft(aJ) } b.extend(Q, { reinitialise: function (aJ) { aJ = b.extend({}, az, aJ); at(aJ) }, scrollToElement: function (aK, aJ, s) { ab(aK, aJ, s) }, scrollTo: function (aK, s, aJ) { N(aK, aJ); M(s, aJ) }, scrollToX: function (aJ, s) { N(aJ, s) }, scrollToY: function (s, aJ) { M(s, aJ) }, scrollToPercentX: function (aJ, s) { N(aJ * (T - ak), s) }, scrollToPercentY: function (aJ, s) { M(aJ * (Z - v), s) }, scrollBy: function (aJ, s, aK) { Q.scrollByX(aJ, aK); Q.scrollByY(s, aK) }, scrollByX: function (s, aK) { var aJ = aD() + Math[s < 0 ? "floor" : "ceil"](s), aL = aJ / (T - ak); W(aL * j, aK) }, scrollByY: function (s, aK) { var aJ = aB() + Math[s < 0 ? "floor" : "ceil"](s), aL = aJ / (Z - v); V(aL * i, aK) }, positionDragX: function (s, aJ) { W(s, aJ) }, positionDragY: function (aJ, s) { V(aJ, s) }, animate: function (aJ, aM, s, aL) { var aK = {}; aK[aM] = s; aJ.animate(aK, { duration: az.animateDuration, easing: az.animateEase, queue: false, step: aL }) }, getContentPositionX: function () { return aD() }, getContentPositionY: function () { return aB() }, getContentWidth: function () { return T }, getContentHeight: function () { return Z }, getPercentScrolledX: function () { return aD() / (T - ak) }, getPercentScrolledY: function () { return aB() / (Z - v) }, getIsScrollableH: function () { return aF }, getIsScrollableV: function () { return aA }, getContentPane: function () { return Y }, scrollToBottom: function (s) { V(i, s) }, hijackInternalLinks: function () { m() }, destroy: function () { g() } }); at(O)
		            } e = b.extend({}, b.fn.jScrollPane.defaults, e); b.each(["mouseWheelSpeed", "arrowButtonSpeed", "trackClickSpeed", "keyboardSpeed"], function () { e[this] = e[this] || e.speed }); return this.each(function () { var f = b(this), g = f.data("jsp"); if (g) { g.reinitialise(e) } else { g = new d(f, e); f.data("jsp", g) } })
		        }; b.fn.jScrollPane.defaults = { showArrows: false, maintainPosition: true, stickToBottom: false, stickToRight: false, clickOnTrack: true, autoReinitialise: false, autoReinitialiseDelay: 500, verticalDragMinHeight: 0, verticalDragMaxHeight: 99999, horizontalDragMinWidth: 0, horizontalDragMaxWidth: 99999, contentWidth: c, animateScroll: false, animateDuration: 300, animateEase: "linear", hijackInternalLinks: false, verticalGutter: 4, horizontalGutter: 4, mouseWheelSpeed: 0, arrowButtonSpeed: 0, arrowRepeatFreq: 50, arrowScrollOnHover: false, trackClickSpeed: 0, trackClickRepeatFreq: 70, verticalArrowPositions: "split", horizontalArrowPositions: "split", enableKeyboardNavigation: true, hideFocus: false, keyboardSpeed: 0, initialDelay: 300, speed: 30, scrollPagePercent: 0.8 }
		    })(jQuery, this);
		    /**
             * jquery.bookblock.js v1.0.2
             * http://www.codrops.com
             *
             * Licensed under the MIT license.
             * http://www.opensource.org/licenses/mit-license.php
             *
             * Copyright 2012, Codrops
             * http://www.codrops.com
             */
		    ;
		    (function ($, window, undefined) {

		        'use strict';

		        /*
                * debouncedresize: special jQuery event that happens once after a window resize
                *
                * latest version and complete README available on Github:
                * https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js
                *
                * Copyright 2011 @louis_remi
                * Licensed under the MIT license.
                */
		        var $event = $.event,
                $special,
                resizeTimeout;

		        $special = $event.special.debouncedresize = {
		            setup: function () {
		                $(this).on("resize", $special.handler);
		            },
		            teardown: function () {
		                $(this).off("resize", $special.handler);
		            },
		            handler: function (event, execAsap) {
		                // Save the context
		                var context = this,
                            args = arguments,
                            dispatch = function () {
                                // set correct event type
                                event.type = "debouncedresize";
                                $event.dispatch.apply(context, args);
                            };

		                if (resizeTimeout) {
		                    clearTimeout(resizeTimeout);
		                }

		                execAsap ?
                            dispatch() :
                            resizeTimeout = setTimeout(dispatch, $special.threshold);
		            },
		            threshold: 150
		        };

		        // global
		        var $window = $(window),
                    Modernizr = window.Modernizr;

		        $.BookBlock = function (options, element) {

		            this.$el = $(element);
		            this._init(options);

		        };

		        // the options
		        $.BookBlock.defaults = {
		            // speed for the flip transition in ms
		            speed: 1000,
		            // easing for the flip transition
		            easing: 'ease-in-out',
		            // if set to true, both the flipping page and the sides will have an overlay to simulate shadows
		            shadows: true,
		            // opacity value for the "shadow" on both sides (when the flipping page is over it)
		            // value : 0.1 - 1
		            shadowSides: 0.2,
		            // opacity value for the "shadow" on the flipping page (while it is flipping)
		            // value : 0.1 - 1
		            shadowFlip: 0.1,
		            // perspective value
		            perspective: 1300,
		            // if we should show the first item after reaching the end
		            circular: false,
		            // if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'
		            nextEl: '',
		            // if we want to specify a selector that triggers the prev() function
		            prevEl: '',
		            // autoplay. If true it overwrites the circular option to true
		            autoplay: false,
		            // time (ms) between page switch, if autoplay is true
		            interval: 3000,
		            //if we want to navigate the slides with the keyboard arrows
		            keyboard: true,
		            // callback after the flip transition
		            // old is the index of the previous item
		            // page is the current item's index
		            // isLimit is true if the current page is the last one (or the first one)
		            onEndFlip: function (old, page, isLimit) {
		                return false;
		            },
		            // callback before the flip transition
		            // page is the current item's index
		            onBeforeFlip: function (page) {
		                return false;
		            }
		        };

		        $.BookBlock.prototype = {

		            _init: function (options) {

		                // options
		                this.options = $.extend(true, {}, $.BookBlock.defaults, options);
		                // set the perspective
		                this.$el.css('perspective', this.options.perspective);
		                // items
		                this.$items = this.$el.children('.bb-item');
		                // total items
		                this.itemsCount = this.$items.length;
		                // current item's index
		                this.current = 0;
		                // previous item's index
		                this.previous = -1;
		                // show first item
		                this.$current = this.$items.eq(this.current).show();
		                // get width of this.$el
		                // this will be necessary to create the flipping layout
		                this.elWidth = this.$el.width();
		                var transEndEventNames = {
		                    'WebkitTransition': 'webkitTransitionEnd',
		                    'MozTransition': 'transitionend',
		                    'OTransition': 'oTransitionEnd',
		                    'msTransition': 'MSTransitionEnd',
		                    'transition': 'transitionend'
		                };
		                this.transEndEventName = transEndEventNames[Modernizr.prefixed('transition')] + '.bookblock';
		                // support (3dtransforms && transitions)
		                this.support = Modernizr.csstransitions && Modernizr.csstransforms3d;
		                // initialize/bind some events
		                this._initEvents();
		                // start slideshow
		                if (this.options.autoplay) {

		                    this.options.circular = true;
		                    this._startSlideshow();

		                }

		            },
		            _initEvents: function () {

		                var self = this;

		                if (this.options.nextEl !== '') {

		                    $(this.options.nextEl).on('click.bookblock', function () {

		                        self._action('next');
		                        return false;

		                    });

		                }

		                if (this.options.prevEl !== '') {

		                    $(this.options.prevEl).on('click.bookblock', function () {

		                        self._action('prev');
		                        return false;

		                    });

		                }

		                if (this.options.keyboard == true) {
		                    $(document).keydown(function (e) {
		                        var keyCode = e.keyCode || e.which,
                                    arrow = {
                                        left: 37,
                                        up: 38,
                                        right: 39,
                                        down: 40
                                    };

		                        switch (keyCode) {
		                            case arrow.left:
		                                self._action('prev');
		                                break;
		                            case arrow.right:
		                                self._action('next');
		                                break;
		                        }
		                    });
		                }

		                $window.on('debouncedresize', function () {

		                    // update width value
		                    self.elWidth = self.$el.width();

		                })

		            },
		            _action: function (dir, page) {

		                this._stopSlideshow();
		                this._navigate(dir, page);

		            },
		            _navigate: function (dir, page) {

		                if (this.isAnimating) {
		                    return false;
		                }

		                // callback trigger
		                this.options.onBeforeFlip(this.current);

		                this.isAnimating = true;
		                this.$current = this.$items.eq(this.current);

		                if (page !== undefined) {

		                    this.current = page;

		                } else if (dir === 'next') {

		                    if (!this.options.circular && this.current === this.itemsCount - 1) {

		                        this.end = true;

		                    } else {

		                        this.previous = this.current;
		                        this.current = this.current < this.itemsCount - 1 ? this.current + 1 : 0;

		                    }

		                } else if (dir === 'prev') {

		                    if (!this.options.circular && this.current === 0) {

		                        this.end = true;

		                    } else {

		                        this.previous = this.current;
		                        this.current = this.current > 0 ? this.current - 1 : this.itemsCount - 1;

		                    }

		                }

		                this.$nextItem = !this.options.circular && this.end ? this.$current : this.$items.eq(this.current);

		                if (!this.support) {

		                    this._layoutNoSupport(dir);

		                } else {

		                    this._layout(dir);

		                }

		            },
		            // with no support we consider no 3d transforms and transitions
		            _layoutNoSupport: function (dir) {

		                this.$items.hide();
		                this.$nextItem.show();
		                this.end = false;
		                this.isAnimating = false;
		                var isLimit = dir === 'next' && this.current === this.itemsCount - 1 || dir === 'prev' && this.current === 0;
		                // callback trigger
		                this.options.onEndFlip(this.previous, this.current, isLimit);

		            },
		            // creates the necessary layout for the 3d animation, and triggers the transitions
		            _layout: function (dir) {

		                var self = this,

                            // basic structure:
                            // 1 element for the left side.
                            $s_left = this._addSide('left', dir),
                            // 1 element for the flipping/middle page
                            $s_middle = this._addSide('middle', dir),
                            // 1 element for the right side
                            $s_right = this._addSide('right', dir),
                            // overlays
                            $o_left = $s_left.find('div.bb-overlay'),
                            $o_middle_f = $s_middle.find('div.bb-flipoverlay:first'),
                            $o_middle_b = $s_middle.find('div.bb-flipoverlay:last'),
                            $o_right = $s_right.find('div.bb-overlay'),
                            speed = this.end ? 400 : this.options.speed;

		                this.$items.hide();
		                this.$el.prepend($s_left, $s_middle, $s_right);

		                $s_middle.css({
		                    transition: 'all ' + speed + 'ms ' + this.options.easing
		                }).on(this.transEndEventName, function (event) {

		                    if (event.target.className === 'bb-page') {

		                        self.$el.children('div.bb-page').remove();
		                        self.$nextItem.show();

		                        self.end = false;
		                        self.isAnimating = false;

		                        var isLimit = dir === 'next' && self.current === self.itemsCount - 1 || dir === 'prev' && self.current === 0;

		                        // callback trigger
		                        self.options.onEndFlip(self.previous, self.current, isLimit);

		                    }

		                });

		                if (dir === 'prev') {
		                    $s_middle.css({ transform: 'rotateY(-180deg)' });
		                }

		                // overlays
		                if (this.options.shadows && !this.end) {

		                    var o_left_style = (dir === 'next') ? {
		                        transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'
		                    } : {
		                        transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear',
		                        opacity: this.options.shadowSides
		                    },
                                o_middle_f_style = (dir === 'next') ? {
                                    transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'
                                } : {
                                    transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms',
                                    opacity: this.options.shadowFlip
                                },
                                o_middle_b_style = (dir === 'next') ? {
                                    transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms',
                                    opacity: this.options.shadowFlip
                                } : {
                                    transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'
                                },
                                o_right_style = (dir === 'next') ? {
                                    transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear',
                                    opacity: this.options.shadowSides
                                } : {
                                    transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'
                                };

		                    $o_middle_f.css(o_middle_f_style);
		                    $o_middle_b.css(o_middle_b_style);
		                    $o_left.css(o_left_style);
		                    $o_right.css(o_right_style);

		                }

		                setTimeout(function () {

		                    var style = dir === 'next' ? 'rotateY(-180deg)' : 'rotateY(0deg)';

		                    if (self.end) {
		                        // first && last pages lift up 15 deg when we can't go further
		                        style = dir === 'next' ? 'rotateY(-15deg)' : 'rotateY(-165deg)';
		                    }

		                    $s_middle.css({ transform: style });

		                    // overlays
		                    if (self.options.shadows && !self.end) {

		                        $o_middle_f.css({
		                            opacity: dir === 'next' ? self.options.shadowFlip : 0
		                        });

		                        $o_middle_b.css({
		                            opacity: dir === 'next' ? 0 : self.options.shadowFlip
		                        });

		                        $o_left.css({
		                            opacity: dir === 'next' ? self.options.shadowSides : 0
		                        });

		                        $o_right.css({
		                            opacity: dir === 'next' ? 0 : self.options.shadowSides
		                        });

		                    }


		                }, 30);

		            },
		            // adds the necessary sides (bb-page) to the layout 
		            _addSide: function (side, dir) {

		                var $side;

		                switch (side) {

		                    case 'left':
		                        /*
                                <div class="bb-page" style="z-index:2;">
                                    <div class="bb-back">
                                        <div class="bb-outer">
                                            <div class="bb-content">
                                                <div class="bb-inner">
                                                    dir==='next' ? [content of current page] : [content of next page]
                                                </div>
                                            </div>
                                            <div class="bb-overlay"></div>
                                        </div>
                                    </div>
                                </div>
                                */
		                        $side = $('<div class="bb-page"><div class="bb-back"><div class="bb-outer"><div class="bb-content" style="width:' + this.elWidth + 'px"><div class="bb-inner">' + (dir === 'next' ? this.$current.html() : this.$nextItem.html()) + '</div></div><div class="bb-overlay"></div></div></div></div>').css('z-index', 102);
		                        break;

		                    case 'middle':
		                        /*
                                <div class="bb-page" style="z-index:3;">
                                    <div class="bb-front">
                                        <div class="bb-outer">
                                            <div class="bb-content">
                                                <div class="bb-inner">
                                                    dir==='next' ? [content of current page] : [content of next page]
                                                </div>
                                            </div>
                                            <div class="bb-flipoverlay"></div>
                                        </div>
                                    </div>
                                    <div class="bb-back">
                                        <div class="bb-outer">
                                            <div class="bb-content">
                                                <div class="bb-inner">
                                                    dir==='next' ? [content of next page] : [content of current page]
                                                </div>
                                            </div>
                                            <div class="bb-flipoverlay"></div>
                                        </div>
                                    </div>
                                </div>
                                */
		                        $side = $('<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content" style="left:' + (-this.elWidth / 2) + 'px;width:' + this.elWidth + 'px"><div class="bb-inner">' + (dir === 'next' ? this.$current.html() : this.$nextItem.html()) + '</div></div><div class="bb-flipoverlay"></div></div></div><div class="bb-back"><div class="bb-outer"><div class="bb-content" style="width:' + this.elWidth + 'px"><div class="bb-inner">' + (dir === 'next' ? this.$nextItem.html() : this.$current.html()) + '</div></div><div class="bb-flipoverlay"></div></div></div></div>').css('z-index', 103);
		                        break;

		                    case 'right':
		                        /*
                                <div class="bb-page" style="z-index:1;">
                                    <div class="bb-front">
                                        <div class="bb-outer">
                                            <div class="bb-content">
                                                <div class="bb-inner">
                                                    dir==='next' ? [content of next page] : [content of current page]
                                                </div>
                                            </div>
                                            <div class="bb-overlay"></div>
                                        </div>
                                    </div>
                                </div>
                                */
		                        $side = $('<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content" style="left:' + (-this.elWidth / 2) + 'px;width:' + this.elWidth + 'px"><div class="bb-inner">' + (dir === 'next' ? this.$nextItem.html() : this.$current.html()) + '</div></div><div class="bb-overlay"></div></div></div></div>').css('z-index', 101);
		                        break;

		                }

		                return $side;

		            },
		            _startSlideshow: function () {

		                var self = this;

		                this.slideshow = setTimeout(function () {

		                    self._navigate('next');

		                    if (self.options.autoplay) {
		                        self._startSlideshow();
		                    }

		                }, this.options.interval);

		            },
		            _stopSlideshow: function () {

		                if (this.options.autoplay) {

		                    clearTimeout(this.slideshow);
		                    this.options.autoplay = false;

		                }

		            },
		            // public method: flips next
		            next: function () {
		                this._action('next');
		            },
		            // public method: flips back
		            prev: function () {
		                this._action('prev');
		            },
		            // public method: goes to a specific page
		            jump: function (page) {

		                page -= 1;

		                if (page === this.current || page >= this.itemsCount || page < 0) {
		                    return false;
		                }

		                this._action(page > this.current ? 'next' : 'prev', page);

		            },
		            // public method: check if isAnimating is true
		            isActive: function () {
		                return this.isAnimating;
		            },
		            // public method: dynamically adds new elements
		            // call this method after inserting new "bb-item" elements inside the BookBlock
		            update: function () {

		                var $currentItem = this.$items.eq(this.current);
		                this.$items = this.$el.children('.bb-item');
		                this.itemsCount = this.$items.length;
		                this.current = $currentItem.index();

		            }

		        };

		        var logError = function (message) {
		            if (window.console) {
		                window.console.error(message);
		            }
		        };

		        $.fn.bookblock = function (options) {

		            var instance = $.data(this, 'bookblock');

		            if (typeof options === 'string') {

		                var args = Array.prototype.slice.call(arguments, 1);

		                this.each(function () {

		                    if (!instance) {

		                        logError("cannot call methods on bookblock prior to initialization; " + "attempted to call method '" + options + "'");
		                        return;

		                    }

		                    if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {

		                        logError("no such method '" + options + "' for bookblock instance");
		                        return;

		                    }

		                    instance[options].apply(instance, args);

		                });

		            } else {

		                this.each(function () {

		                    if (instance) {

		                        instance._init();

		                    } else {

		                        instance = $.data(this, 'bookblock', new $.BookBlock(options, this));

		                    }

		                });

		            }

		            return instance;

		        };

		    })(jQuery, window);
		    var Page = (function () {

		        var $container = $('#container'),
                    $bookBlock = $('#bb-bookblock'),
                    $items = $bookBlock.children(),
                    itemsCount = $items.length,
                    current = 0,
                    bb = $('#bb-bookblock').bookblock({
                        speed: 800,
                        perspective: 2000,
                        shadowSides: 0.8,
                        shadowFlip: 0.4,
                        onEndFlip: function (old, page, isLimit) {

                            current = page;
                            // update TOC current
                            updateTOC();
                            // updateNavigation
                            updateNavigation(isLimit);
                            // initialize jScrollPane on the content div for the new item
                            setJSP('init');
                            // destroy jScrollPane on the content div for the old item
                            setJSP('destroy', old);

                        }
                    }),
                    $navNext = $('#bb-nav-next'),
                    $navPrev = $('#bb-nav-prev').hide(),
                    $menuItems = $container.find('ul.menu-toc > li'),
                    $tblcontents = $('#tblcontents'),
                    transEndEventNames = {
                        'WebkitTransition': 'webkitTransitionEnd',
                        'MozTransition': 'transitionend',
                        'OTransition': 'oTransitionEnd',
                        'msTransition': 'MSTransitionEnd',
                        'transition': 'transitionend'
                    },
                    transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
                    supportTransitions = Modernizr.csstransitions;

		        function init() {

		            // initialize jScrollPane on the content div of the first item
		            setJSP('init');
		            initEvents();

		        }

		        function initEvents() {

		            // add navigation events
		            $navNext.on('click', function () {
		                bb.next();
		                return false;
		            });

		            $navPrev.on('click', function () {
		                bb.prev();
		                return false;
		            });

		            // add swipe events
		            $items.on({
		                'swipeleft': function (event) {
		                    if ($container.data('opened')) {
		                        return false;
		                    }
		                    bb.next();
		                    return false;
		                },
		                'swiperight': function (event) {
		                    if ($container.data('opened')) {
		                        return false;
		                    }
		                    bb.prev();
		                    return false;
		                }
		            });

		            // show table of contents
		            $tblcontents.on('click', toggleTOC);

		            // click a menu item
		            $menuItems.on('click', function () {

		                var $el = $(this),
                            idx = $el.index(),
                            jump = function () {
                                bb.jump(idx + 1);
                            };

		                current !== idx ? closeTOC(jump) : closeTOC();

		                return false;

		            });

		            // reinit jScrollPane on window resize
		            $(window).on('debouncedresize', function () {
		                // reinitialise jScrollPane on the content div
		                setJSP('reinit');
		            });

		        }

		        function setJSP(action, idx) {

		            var idx = idx === undefined ? current : idx,
                        $content = $items.eq(idx).children('div.content'),
                        apiJSP = $content.data('jsp');

		            if (action === 'init' && apiJSP === undefined) {
		                $content.jScrollPane({ verticalGutter: 0, hideFocus: true });
		            }
		            else if (action === 'reinit' && apiJSP !== undefined) {
		                apiJSP.reinitialise();
		            }
		            else if (action === 'destroy' && apiJSP !== undefined) {
		                apiJSP.destroy();
		            }

		        }

		        function updateTOC() {
		            $menuItems.removeClass('menu-toc-current').eq(current).addClass('menu-toc-current');
		        }

		        function updateNavigation(isLastPage) {

		            if (current === 0) {
		                $navNext.show();
		                $navPrev.hide();
		            }
		            else if (isLastPage) {
		                $navNext.hide();
		                $navPrev.show();
		            }
		            else {
		                $navNext.show();
		                $navPrev.show();
		            }

		        }

		        function toggleTOC() {
		            var opened = $container.data('opened');
		            opened ? closeTOC() : openTOC();
		        }

		        function openTOC() {
		            $navNext.hide();
		            $navPrev.hide();
		            $container.addClass('slideRight').data('opened', true);
		        }

		        function closeTOC(callback) {

		            updateNavigation(current === itemsCount - 1);
		            $container.removeClass('slideRight').data('opened', false);
		            if (callback) {
		                if (supportTransitions) {
		                    $container.on(transEndEventName, function () {
		                        $(this).off(transEndEventName);
		                        callback.call();
		                    });
		                }
		                else {
		                    callback.call();
		                }
		            }

		        }

		        return { init: init };

		    })();

		    IsiScrDw
		</script>
		<script>
		    $(function () {

		        Page.init();

		    });
		</script>
	</body>
</html>
